import React, { useEffect, useState } from 'react';
import { AxGGEditor, AxFlow } from '@/components/AxBase/AxGGEditor';
import { axhttp } from '@/shared/axhttp';

/** 初始X坐标 */
const initX = 100;
/** 初始Y坐标 */
const initY = 50;
/** 初始Y权值 */
const weightX = 200;
/** 初始Y权值 */
const weightY = 150;
const getNodes = (tree: any[], deep: any = 0, nodes: any[], parentY: any) => {
    tree && tree.forEach && tree.forEach((f: any, idx: any) => {
        const parentXE = initX + (deep * weightX);
        const parentYE = parentY + (idx * weightY);
        nodes.push({
            id: f.id,
            label: f.text,
            axdata: {
                userName: f.userName,
                dealTime: f.dealTime,
                show: f.deal,
                text: f.text,
            },
            x: parentXE,
            y: parentYE,
            size: [120, 60],
            shape: 'modelRect',
            logoIcon: {  //左侧icon
                show: false,
            },
            stateIcon: {  //右侧icon
                show: f.deal,
            },
            style: {
                fill: '#f0f5ff',
                stroke: f.current === true ? 'rgb(243,82,27)' : 'rgb(90,170,255)',
                lineWidth: 2,
            },
            preRect: {
                // 设置为 false，则不显示
                show: true,
                fill: f.current === true ? 'rgb(243,82,27)' : 'rgb(90,170,255)',
                width: 8,
            },
        });
        if (f.children) {
            getNodes(f.children, deep + 1, nodes, parentYE);
        }
    });
}

const getEdges = (source: any, children: any[], edges: any[]) => {
    children.forEach((f: any) => {
        edges.push({
            source: source,
            target: f.id,
        });
        if (f.children) {
            getEdges(f.id, f.children, edges);
        }
    });
}
const { getTreeX } = axhttp;
const Chart: React.FC<any> = (props) => {
    const { recordId, workFlowType, url } = props;
    const [data, setData] = useState<any>({
        nodes: [],
        edges: [],
    });

    useEffect(() => {
        getTreeX(url, null, { recordId, workFlowType }).then((res: any) => {
            const tree = res.list;
            let nodes: any[] = [];
            let edges: any[] = [];
            getNodes(tree, 0, nodes, initY);
            tree && tree[0] && getEdges(tree[0].id, tree[0].children, edges);

            setData({
                nodes: nodes,
                edges: edges,
            });
        });
    }, [workFlowType])

    const ttel = document.createElement('span');
    ttel.style.position = 'absolute';
    ttel.style.border = 'solid 2px #52c41a';
    ttel.style.borderRadius = '8px';
    ttel.style.borderLeftWidth = '8px';
    ttel.style.backgroundColor = '#eae9e3';
    ttel.style.left = '0px';
    ttel.style.top = '0px';
    ttel.style.fontSize = '8pt';
    ttel.style.padding = '2px 4px 2px 4px';
    ttel.style.zIndex = '9999999';
    document.body.appendChild(ttel);

    const showTooltip = (e: any) => {
        const axdata = e.item.getModel().axdata;
        /** 分支、完结、归档和未处理的流程，不展示处理信息 */
        if (axdata.show === true && axdata.dealTime) {
            ttel.innerHTML = `
            <div class="ant-popover-content">
                <div class="ant-popover-inner" role="tooltip">
                    <div>
                        <div class="ant-popover-inner-content">
                            <p>
                                处&nbsp;&nbsp;理&nbsp;&nbsp;人：${axdata.userName}
                            </p>
                            <p>
                                处理时间：${axdata.dealTime}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            `;
        }
        else {
            ttel.innerHTML = `
            <div class="ant-popover-content">
                <div class="ant-popover-inner" role="tooltip">
                    <div>
                        <div class="ant-popover-inner-content">
                            <p>
                                暂无信息
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            `;
        }
        ttel.style.left = (e.clientX + 10) + 'px';
        ttel.style.top = (e.clientY + 10) + 'px';
        ttel.style.display = 'block';
    }
    const hideTooltip = (e: any) => {
        ttel.style.display = 'none';
        ttel.innerHTML = '';
    }

    return (
        <AxGGEditor>
            <AxFlow
                style={{ width: '100%', height: 1000, backgroundColor: 'rgb(244,246,248)' }}
                data={data}
                onNodeMouseOver={showTooltip}
                onNodeMouseLeave={hideTooltip}
            />
        </AxGGEditor>
    );
};

export default Chart;
